<template>
  <view class="index">
    <div class="mapDiv">
      <MapComponents
        @mapSelectAddress="mapSelectData"
        ref="MapComponentsRef"
        v-if="showMap"
      ></MapComponents>
    </div>
    <div class="infoDiv">
      <!-- <div class="infoTitle">1</div> -->
      <div class="infoCenter">
        <div class="infoTab">
          <div
            v-for="item in tabList"
            :key="item"
            @click="tabClick(item)"
            :class="item.click ? 'selectDiv' : 'noSelectDiv'"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="addressInput">
          <div class="startAddress">
            <div
              style="
                background-color: #20c063;
                width: 10px;
                height: 10px;
                border-radius: 10px;
                margin-left: 20px;
              "
            ></div>
            <div class="inputAddress">
              <span style="color: #b9b9bb">从</span>
              {{ mapAddress }}
              <span
                style="
                  color: #b9b9bb;
                  display: inline-flex;
                  align-items: center;
                "
                >上车<IconFont
                  name="rect-right"
                  color="#b9b9bb"
                  size="13"
                ></IconFont
              ></span>
            </div>
          </div>
          <div class="endAddress" @click="toAddressSelect()">
            <div
              style="
                background-color: #ffbe10;
                width: 10px;
                height: 10px;
                border-radius: 10px;
                margin-left: 20px;
              "
            ></div>
            <div class="endAddressInput">您想去哪?</div>
          </div>
        </div>
        <div class="infoBottom">
          <template v-for="item in IconFuncList" :key="item">
            <div class="iconFunc" v-if="item.isShow">
              <div class="iconFunc-card" @click="toPath(item)">
                <IconFont
                  :name="item.IconFontName"
                  size="35"
                  :color="item.color"
                />
              </div>
              <div class="iconFunc-name">
                {{ item.name }}
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </view>
</template>

<script lang="js" setup name="MapDialog">
import Taro, { eventCenter, getCurrentInstance, useDidShow, useDidHide } from '@tarojs/taro'
import { onMounted, ref, shallowRef,nextTick } from "vue";
import MapComponents from "../../components/MapComponents/MapComponents.vue";
import { IconFont } from '@nutui/icons-vue-taro';
const showMap=ref(false)
const MapComponentsRef = ref()
const tabList = ref([
  {
    name: "零时用车",
    id: 1,
    click: true
  },
  {
    name: "短时租车",
    id: 2,
    click: false
  }])
const IconFuncList = ref([
  {
    name: "订单",
    IconFontName: 'order',
    path: '/pages/trip/index',
    id: 1,
    isShow: true,
    color: '#ffb114'
  },
  {
    name: "审核",
    IconFontName: 'edit',
    path: '/pages/approve/index',
    id: 2,
    isShow: true,
    color: '#fa2c19'
  },
  {
    name: "我的",
    IconFontName: 'my',
    path: '/pages/my/index',
    id: 3,
    isShow: true,
    color: '#0fd8ab'
  },
])
const mapAddress = ref('')
function mapSelectData(data) {
  mapAddress.value = data
}
function toAddressSelect() {
  Taro.navigateTo({
    url: '/pages/addressSelect/index'
  })
}
function toPath(item){
  Taro.navigateTo({
    url: item.path
  })
}
useDidShow(() => {
  showMap.value=true
  nextTick(()=>{
    MapComponentsRef.value.toInitMap();

  })
});
/**
 * tabClick函数用于点击tab时更新tabList的click属性
 * @param {Object} clickItem - 当前点击的tab对象
 */
function tabClick(clickItem) {
  // 使用filter方法来创建一个新的数组，其中每个元素的click属性根据clickItem.id的值进行设置
  tabList.value = tabList.value.map(item => ({
    ...item,
    click: item.id === clickItem.id
  }));
}

useDidHide(() => {
  MapComponentsRef.value.DidMap()
  showMap.value=false
})
</script>
<style lang="scss">
@import "./index.scss";
</style>
